<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车旋转</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
			}
		@keyframes dfc{
			0%{
				transform: rotate(180deg);
				}
			30%{
				transform: rotate(360deg);
			}
			100%{
				transform: rotate(720deg);
			}
		}
		.imgb{
				animation: dfc1 .8s linear infinite;
			}
		@keyframes dfc1{
			0%{
				transform: scale(1) rotateY(180deg);
				}
			30%{
				transform: scale(.6) rotateY(360deg);
			}
			100%{
				transform: scale(1) rotateY(720deg);
			}
		}
		</style>
	</head>
	
	<body>
		<img src="../img/donghua.gif" alt="1" />
		<audio src="../img/dafengche.mp3" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			/* jq 页面图片改变 而且旋转 */
			$("#btn1").click(function(){
				// 元素  上属性 |  元素可以加类名
				$("img").attr("src","../img/大风车.jpeg").addClass("imga");
			});
			//暂停
			$("#btn2").click(function(){
				$("img").removeClass("imga");
				$("audio").removeAttr("src");
			});
			//反转 y轴 缩放    类样式  .imgb
			$("#btn3").click(function(){
				$("img").addClass("imgb");
				$("audio").attr("src","../img/dafengche.mp3");
			});
		</script>
	</body>
</html>